<template>
  <div class="mb-20">
    <div class="flexbetween mb-8">
      <div class="f-14 c_text2">{{title}}</div>
      <el-tooltip
        class="item"
        effect="dark"
        content="管理标签"
        placement="left"
      >
        <i class="el-icon-s-tools f-16 c_text3" @click="handleLabelOpen"></i>
      </el-tooltip>
    </div>
    <div class="boxcontent bg_f7f7f7 f-14 c_text2 y_over">
      <div v-if="labelList.length" class="flex flexwrap">
        <div
          class="flexcenter labelitem"
          v-for="(item, index) in labelList"
          :key="index"
        >
          {{ item }}
        </div>
      </div>
      <div v-else class="flexcolumn aligncenter c_text4 justifycenter h_full">
        <div><i class="el-icon-folder f-30 mb-10"></i></div>
        <div class="">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    labelList: {
      type: Array,
      default: [],
    },
  },
  methods: {
    handleLabelOpen() {
      this.$emit("open");
    },
  },
};
</script>
<style lang="scss" scoped>
.boxcontent {
  max-height: 104px;
  padding: 8px;
  border-radius: 2px;
  overflow-x: hidden;
  word-break: break-all;
  white-space: pre-line;
}
.labelitem {
  margin: 5px 5px 5px 0px;
  height: 24px;
  padding: 0.8px 7px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
}
</style>